
<!DOCTYPE html>
<html lang="en">
    <head><meta name="generator" content="Hexo 3.9.0">
    
        <title>FairyGUI - 关联系统</title>
    
        <meta charset="utf-8">
        <meta name="description" content="FairyGUI教程">
        <meta name="keywords" content="FairyGUI,FGUI,FairyGUI教程">
        
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <meta property="og:type" content="article">
        <meta property="og:title" content="-关联系统FairyGUI">
        <meta property="og:description" content="FairyGUI教程">

        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="关联系统 — FairyGUI">
        <meta name="twitter:description" content="FairyGUI教程">

      <!--  <link href='//fonts.proxy.ustclug.org/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->

        <!-- main page styles -->
        <link rel="stylesheet" href="/docs/css/page.css">

        <!-- this needs to be loaded before guide's inline scripts -->
        <script src="/docs/js/vue.min.js"></script>
        <script>window.PAGE_TYPE = "guide_editor"</script>
    </head>
    <body class="docs">        <div id="mobile-bar" data-bg-text="FairyGUI">
            <a class="menu-button"></a>
        </div>
        <div id="header">
  <ul id="nav">
    <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
  </ul>
</div>

        
            <div id="main" class="fix-sidebar">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li><a href="/docs/guide/" class="nav-link current">教程</a></li>
<li><a href="/docs/examples/" class="nav-link">在线示例</a></li>
<li><a href="/docs/release_notes/" class="nav-link">发行日志</a></li>
<li><a href="/" class="nav-link">首页</a></li>
    </ul>
    <div class="list">
        <ul class="menu-root">
            

	 			
	                
	                <li>
	                    <a href="/docs/guide/index.html" class="sidebar-link">导读</a>
	                </li>
	            
	
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/index.html" class="sidebar-link">编辑器使用基础</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/project_settings.html" class="sidebar-link">项目设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/package.html" class="sidebar-link">包</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/branch.html" class="sidebar-link">分支</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/publish.html" class="sidebar-link">发布</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/object.html" class="sidebar-link">元件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/image.html" class="sidebar-link">图片</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/movieclip.html" class="sidebar-link">动画</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/graph.html" class="sidebar-link">图形</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/loader.html" class="sidebar-link">装载器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/text.html" class="sidebar-link">文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/richtext.html" class="sidebar-link">富文本</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/group.html" class="sidebar-link">组</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/component.html" class="sidebar-link">组件</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollpane.html" class="sidebar-link">滚动容器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/controller.html" class="sidebar-link">控制器</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/relation.html" class="sidebar-link current">关联系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/label.html" class="sidebar-link">标签</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/button.html" class="sidebar-link">按钮</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/combobox.html" class="sidebar-link">下拉框</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/progressbar.html" class="sidebar-link">进度条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/slider.html" class="sidebar-link">滑动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/scrollbar.html" class="sidebar-link">滚动条</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/list.html" class="sidebar-link">列表</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/tree.html" class="sidebar-link">树</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/popup.html" class="sidebar-link">Popup</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/dragdrop.html" class="sidebar-link">Drag&Drop</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/window.html" class="sidebar-link">窗口系统</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/transition.html" class="sidebar-link">动效</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/adaptation.html" class="sidebar-link">适配</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/i18n.html" class="sidebar-link">多国语言</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/export.html" class="sidebar-link">导入和导出</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/preference.html" class="sidebar-link">偏好设置</a>
	                </li>
	            
	                
	                <li>
	                    <a href="/docs/guide/editor/plugin.html" class="sidebar-link">插件</a>
	                </li>
	            
	
	            
	                
	                
	                <li><h3>SDK</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/sdk/laya.html" class="sidebar-link">LayaAir</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/egret.html" class="sidebar-link">Egret</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cocos2dx.html" class="sidebar-link">Cocos2dx</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/creator.html" class="sidebar-link">Cocos Creator</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/sdk/cryengine.html" class="sidebar-link">Cry Engine</a>
	                </li>
	            

	            
	                
	                
	                <li><h3>SDK - Unity</h3></li>
	                
	                <li>
	                    <a href="/docs/guide/unity/index.html" class="sidebar-link">显示UI面板</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/transform.html" class="sidebar-link">坐标系统</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/atlas.html" class="sidebar-link">纹理集的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/font.html" class="sidebar-link">字体的处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/input.html" class="sidebar-link">输入处理</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/event.html" class="sidebar-link">事件机制</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/insert3d.html" class="sidebar-link">插入模型/粒子/Spine/Canvas</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/uipainter.html" class="sidebar-link">曲面UI</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/drawcall.html" class="sidebar-link">DrawCall优化</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/lua.html" class="sidebar-link">在Lua中使用</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/special.html" class="sidebar-link">特色功能</a>
	                </li>
	            
	                
	                
	                <li>
	                    <a href="/docs/guide/unity/faq.html" class="sidebar-link">常见问题</a>
	                </li>
	            

            
        </ul>
    </div>
</div>


<div class="content guide_editor with-sidebar ">
    
      <h1>关联系统</h1>
    
    <p>关联系统是FairyGUI实现自动布局的核心技术。其他UI框架提供的布局系统，一般只提供各种固定的layout，或者锚点，都只能定义元件与容器之间的关系。而FairyGUI的关联能够定义任意两个元件的关系，而且互动方式更多样。</p>
<h2 id="设置关联"><a href="#设置关联" class="headerlink" title="设置关联"></a>设置关联</h2><p>选定一个元件，可以看到在右边的属性栏出现了关联面板：</p>
<p><img src="../../images/QQ20191211-171058.png" alt></p>
<p>关联的目标可以是当前容器中的任意一个元件，也可以是正在编辑的容器本身（称为容器组件）。<br>如果要设置的目标是容器组件，则点击“容器”下面的下拉框就能快速完成设置；如果是其他元件，则点击“对其他元件”就可以进入到选择目标元件的界面，这时我们就可以从左边的编辑区域选择目标对象，选择结束后，点击“完成”完成设置。</p>
<p><img src="../../images/QQ20191211-171302.png" alt></p>
<p>目标对象设置好后，就可以设置自己和目标的关联关系。</p>
<p>关联关系的类型有：（为论述方便，这里假设自己是A，目标元件是T）</p>
<ul>
<li><p><code>左-&gt;左</code> 假设原来T和A的左侧距离是X，当T的左侧位置变化时，保持T和A的左侧距离为X。注意：与容器组件关联左-&gt;左是没有意义的，因为元件在容器中，而容器组件的位置变化是整个容器的移动，并不会影响容器内部所有元件的坐标。</p>
</li>
<li><p><code>左-&gt;中</code> 假设原来T的中心点和A的左侧距离是X，当T的中心点发生位移时，保持T的中心点和A的左侧距离为X。这里T的中心点发生位移有两种情况，一是T发生位移，二是T的宽度增大。</p>
<p>举例说明，下面的文本是自动增大的，图标与文本建立了一个左-&gt;中的关联，所以当文字变化时，图标保持在了文本的中心：</p>
<p><img src="../../images/20170802000000.jpg" alt></p>
<p>注意：关联只有在目标的位置或大小发生变化时才起作用。比如上例，设置图标关联文本的左-&gt;中，并不意味着就是居中，图标的初始位置是要自己设置的。这是初学者比较容易犯的错误。再强调一下，它只是保持T的中心点和A的左侧距离。那么看下面这个示范：</p>
<p><img src="../../images/20170802000001.jpg" alt></p>
<p>依然是建立的左-&gt;中关联，这次我们把图标往左挪动了一点，可以看到，文本长度发生变化后，图标的位置与文本中线的位置保持不变。</p>
</li>
<li><p><code>左-&gt;右</code> 假设原来T的右侧和A的左侧距离是X，当T的右侧发生位移时，保持T的右侧和A的左侧距离为X。这里T的右侧发生位移有两种情况，一是T发生位移，二是T的宽度增大。咋一看，似乎和左-&gt;中没有区别，但在复杂的应用场景中，左-&gt;右有发挥作用的空间。举例说明：</p>
<p><img src="../../images/20170802000002.jpg" alt></p>
<p>这里有一个左右居中的关联，下面会说明，暂且不表。置可以看到，在文本内容发生变化时，文本的中线位置没有发生变化，位所以问号图标的置不变；但文本的右侧位发生了变化，所以叹号图标随之发生了移动，保持了与文本右侧的距离。</p>
</li>
<li><p><code>左右居中</code> 假设原来T的中心和A的中心距离是X，当T的中心发生位移时，保持T的中心和A的中心距离为X。这里T的中心发生位移有两种情况，一是T发生位移，二是T的宽度增大。举例说明：</p>
<p><img src="../../images/20170802000003.jpg" alt></p>
<p>文本建立了一个与容器组件的左右居中关联，可以看到，当组件变宽时，文本依然保持了中间的位置。这里再提醒一次，左右居中关联并不等同与居中，文本可以放置在任何位置。关联只是保证中线距离一直不变。</p>
</li>
<li><p><code>右-&gt;左</code> 假设原来T的左侧和A的右侧距离是X，当T的左侧发生位移时，保持T的左侧和A的右侧距离为X。”右“系列的关联还有一个特点，就是如果A的宽度发生改变时，A也会自动移动以保持X不变。举例说明：</p>
<p><img src="../../images/20170802000004.jpg" alt></p>
<p>这里文本建立了一个与问号图标的右-&gt;左关联，当文本内容发生变化时，文本的宽度发生了变化，正常来说，宽度发生变化后文本应该向右侧伸展，但为了保持文本的右侧与问号左侧距离不变，文本自动向左延伸，提示：本例中文本与容器组件建立一个右-&gt;左关联也是同样效果的。</p>
</li>
<li><p><code>右-&gt;中</code> 假设原来T的中心和A的右侧距离是X，当T的中心发生位移时，保持T的中心和A的右侧距离为X。</p>
</li>
<li><p><code>右-&gt;右</code> 假设原来T的右侧和A的右侧距离是X，当T的右侧发生位移时，保持T的右侧和A的右侧距离为X。</p>
</li>
<li><p><code>左延展-&gt;左</code> 假设T的左侧和A的左侧的距离是X，当T的左侧发生位移时，A的左侧会发生移动，但保持A的右侧不变，也就是A产生一个延展（宽度变化）的效果。举例说明：</p>
<p><img src="../../images/20170802233918.png" alt></p>
<p>绿色方块建立了一个与白色方块左延展-&gt;左的关联。</p>
<p><img src="../../images/gaollg20.gif" alt></p>
<p>当白色方块向左移动时，绿色方块的左侧跟随白色方块移动，但绿色方块的右侧保持不动，效果就是绿色方块被拉长了。</p>
</li>
<li><p><code>左延展-&gt;右</code> 假设T的右侧和A的左侧的距离是X，当T的右侧发生位移时，A的左侧会发生移动，但保持A的右侧不变，也就是A产生一个延展（宽度变化）的效果。</p>
</li>
<li><p><code>右延展-&gt;左</code> 假设T的左侧和A的右侧的距离是X，当T的左侧发生位移时，A的右侧会发生移动，但保持A的左侧不变，也就是A产生一个延展（宽度变化）的效果。</p>
</li>
<li><p><code>右延展-&gt;右</code> 假设T的右侧和A的右侧的距离是X，当T的右侧发生位移时，A的右侧会发生移动，但保持A的左侧不变，也就是A产生一个延展（宽度变化）的效果。右延展-&gt;右一般也用来做容器的自动扩展。举例说明：</p>
<p><img src="../../images/20170802234354.png" alt></p>
<p>这里容器组件设置了一个对文本的右延展-&gt;右关联（设置容器组件的关联的方法是点击编辑器区域的空白处，也就是不要选中任何元件，右侧就会出现容器组件的关联设置），这表示当文本扩展时，容器组件的宽度随之增大。</p>
<p><img src="../../images/20170802234450.png" alt></p>
<p>当容器组件建立了对文本右延展的关联后，容器组件的宽度就由文本的宽度决定了。所以当这个组件被拖到其他地方使用时，它的宽度就无法手工改变了，拉大拉小或者直接输入宽度都没有作用。</p>
</li>
<li><p><code>宽-&gt;宽</code> 假设T的宽度和A的宽度的差是X，当T的宽度发生变化时，A的宽度发生相同的变化。举例说明：</p>
<p><img src="../../images/20170802234604.png" alt></p>
<p>背景图片与容器组件建立了宽-&gt;宽关联。</p>
<p><img src="../../images/20170802234450.png" alt></p>
<p>现在我们把制作好的组件拿出来使用，可以看到，当组件被拉宽时，图标的宽度也随之被拉宽。如果我们没有设置关联，那么效果是这样的：</p>
<p><img src="../../images/20170802234710.png" alt></p>
</li>
<li><p><code>顶-&gt;顶</code> <code>顶-&gt;中</code> <code>顶-&gt;底</code> <code>上下居中</code> <code>底-&gt;顶</code> <code>底-&gt;中</code> <code>底-&gt;底</code> <code>顶延展-&gt;顶</code> <code>顶延展-&gt;底</code> <code>底延展-&gt;顶</code> <code>底延展-&gt;底</code> <code>高-&gt;高</code> 这些关联的设置方法和特性都和上述的关联相同，只是从横向变成纵向而已，在此不再赘述。</p>
</li>
</ul>
<p>从上面的论述可以看到，关联总是在保持设定好的距离，这个距离是绝对距离，是像素的距离。有时候我们需要的是成比例的距离。FairyGUI提供了这样一个功能，在设置关联时，可以使用比例距离。只需要勾选关联关系旁边的“%”即可。</p>
<p>百分比关系的功能举例说明：</p>
<p>  <img src="../../images/QQ20191212-204945.png" alt></p>
<p>  笑脸图标增加了一个到容器组件的“左-&gt;中”关联，并勾选”使用百分比“。容器组件的宽度是200像素，现在笑脸图标的x坐标是50像素。也就是说，笑脸图标在容器组件的1/4位置，与容器组件的中心距离也是1/4的宽度。</p>
<p>  现在把设计好的组件拖出来使用，并且把组件的宽度拉长为400像素。可以看到，笑脸图标依照左-&gt;中的关联规则发生了位移，它现在所在的位置是100像素，仍然保持了与容器组件中心距离1/4的宽度。</p>
<p>  <img src="../../images/QQ20191212-205136.png" alt></p>
<h2 id="Relation"><a href="#Relation" class="headerlink" title="Relation"></a>Relation</h2><p>除了在编辑器设置关联外，有时候我们也需要动态添加关联。例如在一款页游中，一个动态添加到舞台的组件，希望舞台宽度改变时（比如浏览器窗口被玩家拖大拖小），组件依然保持在右侧位置，那么可以这样调用：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">aObject.AddRelation(GRoot.inst, RelationType.Right_Right);</span><br></pre></td></tr></table></figure>
<p>又例如，一个动态添加到舞台的组件始终保持满屏大小，可以这样调用</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">aObject.SetSize(GRoot.inst.width, GRoot.inst.height);</span><br><span class="line">aObject.AddRelation(GRoot.inst, RelationType.Size);</span><br></pre></td></tr></table></figure>
<p>RelationType.Size相当于RelationType.Width_Width和RelationType.Height_Height的组合。这里强调一下，使组件变为满屏大小这个操作必须由你完成，也就是上面代码中的SetSize调用。关联并不能完成这项任务，因为关联是不管元件当前的大小的，它只会在目标变化时保持两者大小的差别。</p>
<p>删除关联的方法是：</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line"><span class="comment">//删除某个关联</span></span><br><span class="line">aObject.RemoveRelation(targetObject, RelationType.Size);</span><br><span class="line"></span><br><span class="line"><span class="comment">//删除指向某个对象的所有关联</span></span><br><span class="line">aObject.relations.ClearFor(targetObject);</span><br></pre></td></tr></table></figure>
<h2 id="实例解析"><a href="#实例解析" class="headerlink" title="实例解析"></a>实例解析</h2><p><strong>实例一</strong></p>
<p>这是一个游戏的主界面，主界面在实际显示时通常需要调整大小到满屏，这就要求设计时考虑到界面大小会变化的情况。下图是主界面中各个单独部件布局的要求：</p>
<p><img src="../../images/2016-01-11_164517.jpg" alt></p>
<p>A：和容器组件“左右居中“关联<br>B：和容器组件”右-&gt;右”关联<br>C：和容器组件“右-&gt;右”，”底-&gt;底“关联<br>D：和容器组件”底-&gt;底”，“左右居中%”关联<br>E：和容器组件“底-&gt;底”关联</p>
<p>然后运行时把这个界面设置为满屏就可以了。</p>
<figure class="highlight csharp"><table><tr><td class="code"><pre><span class="line">aComponent.SetSize(GRoot.inst.width, GRoot.inst.height);</span><br><span class="line"><span class="comment">//当屏幕改变时仍然保持全屏。如果屏幕大小始终不变，则这句也可以忽略</span></span><br><span class="line">aComoponet.AddRelation(GRoot.inst, RelationType.Size);</span><br></pre></td></tr></table></figure>
<p><strong>实例二</strong></p>
<p>这是一个游戏的NPC信息界面，NPC的介绍文本是动态的，这里使用了自动高度的文本。下面的链接是一个列表。要求列表在文本内容变化时，自动上移或下移。我们只需要将列表“顶-&gt;底”关联到文即可。</p>
<p><img src="../../images/2016-01-10_105206.jpg" alt></p>
<p><strong>实例三</strong></p>
<p>这是一个游戏中金钱数量的显示，要求当数量变化时，货币图标和文本保持居中。</p>
<p><img src="../../images/2015-12-21_170726.png" alt></p>
<p><img src="../../images/2015-12-21_172654.png" alt></p>
<p><img src="../../images/2015-12-21_172639.png" alt></p>
<p>首先，文本需要设置为自动宽度和高度，这样数量变化时，文本自动会增长。<br>用到的关联有：<br>文本：左右居中关联到容器组件<br>图标：左-&gt;左关联到文本</p>

    
    <div class="footer">
      发现错误或想贡献文档?
      <a href="https://github.com/fairygui/fairygui.github.io/tree/master/src/guide/editor/relation.md" target="_blank">
        在 Github 上编辑此文档!
      </a>
    </div>
</div>

                
            </div>
            <script src="/docs/js/smooth-scroll.min.js"></script>
        

        <!-- main custom script for sidebars, version selects etc. -->        
        <script src="/docs/js/css.escape.js"></script>
        <script src="/docs/js/common.js"></script>
    </body>
</html>
